<template>
  <el-table
    class="no-padding-table"
    :data="tableData"
    style="width: 100%"
    empty-text="暂无数据"
    border
    :row-style="{ height: 0 + 'px' }"
    :cell-style="{ padding: 0 + 'px' }"
    :header-cell-style="{
      background: '#FAFAFA',
      color: '#777676 !important',
      fontWeight: '800',
      padding: '0px',
    }"
  >
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column label="嵌套表格">
      <template #default="{ row }">
        <el-table
          border
          :show-header="false"
          :data="row.nestedData"
          style="width: 100%"
          class="no-padding-table"
          :row-style="{ height: 0 + 'px', padding: 0 + 'px' }"
          :cell-style="{ padding: 0 + 'px' }"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#777676 !important',
            fontWeight: '800',
            padding: '0px',
          }"
        >
          <el-table-column prop="nestedName" label="嵌套名称"></el-table-column>
          <el-table-column prop="nestedValue" label="嵌套值"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "张三",
          nestedData: [
            { nestedName: "嵌套1", nestedValue: "值1" },
            { nestedName: "嵌套2", nestedValue: "值2" },
          ],
        },
        // ... 更多数据
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.no-padding-table .el-table__row,
.no-padding-table .el-table__header-wrapper tr {
  padding: 0 !important;
}
</style>